<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/page/4/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-jQuery扩展之动画" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/28/jQuery扩展之动画/" class="article-date">
  <time datetime="2019-09-28T09:57:36.000Z" itemprop="datePublished">2019-09-28</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/jQuery/">jQuery</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/28/jQuery扩展之动画/">jQuery扩展之动画</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="动画-DOM-及其-CSS-操作"><a href="#动画-DOM-及其-CSS-操作" class="headerlink" title="动画 DOM 及其 CSS 操作"></a>动画 DOM 及其 CSS 操作</h1><h2 id="原理"><a href="#原理" class="headerlink" title="原理"></a>原理</h2><p>我们只需要以固定的时间间隔（例如，0.1秒），每次 DOM 元素的 CSS 样式修改一点（例如，高宽各增加10%），看起来就像动画了</p>
<h2 id="自定义动画"><a href="#自定义动画" class="headerlink" title="自定义动画"></a>自定义动画</h2><blockquote>
<p><code>animate</code></p>
</blockquote>
<p>可以实现任意的动画效果，需要传递的参数是 DOM 元素最终的 CSS 状态和时间</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var div = $(&apos;#test-animate&apos;);</span><br><span class="line">div.animate(&#123;</span><br><span class="line">    opacity: 0.25,</span><br><span class="line">    width: &apos;256px&apos;,</span><br><span class="line">    height: &apos;256px&apos;</span><br><span class="line">&#125;, 3000)</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>delay(time)</code></p>
</blockquote>
<p>delay() 方法可以实现动画暂停</p>
<blockquote>
<p><code>stop()</code></p>
</blockquote>
<p>实现动画终止</p>
<h2 id="动画函数"><a href="#动画函数" class="headerlink" title="动画函数"></a>动画函数</h2><blockquote>
<p><code>show()/hide()</code></p>
</blockquote>
<p>直接以无参形式调用 show() 和 hide()，会显示和隐藏 DOM 元素，但是只要传递一个时间参数进去，就变成了动画</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">var div = $(&apos;#test-show-hide&apos;);</span><br><span class="line">div.hide(3000);// 在3秒钟内逐渐消失</span><br></pre></td></tr></table></figure>

<blockquote>
<p><code>toggle()</code></p>
</blockquote>
<p>根据当前状态决定是 show() 和 hide()</p>
<blockquote>
<p><code>fadeIn / fadeout</code></p>
</blockquote>
<p>fadeIn() 和 fadeout 方法是动画淡入淡出，也就是通过不断地设置 DOM 元素的 opacity 属性来实现</p>
<blockquote>
<p><code>fadeToggle()</code></p>
</blockquote>
<p>根据元素是否可见来决定下一步动作</p>
<blockquote>
<p><code>slideUp / slideDown</code></p>
</blockquote>
<p>slideUp() / slideDown() 在垂直方向逐渐展开或收缩</p>
<blockquote>
<p><code>slideToggle()</code></p>
</blockquote>
<p>根据元素是否可见来进行下一步动作</p>
<h2 id="计时器"><a href="#计时器" class="headerlink" title="计时器"></a>计时器</h2><blockquote>
<p><code>setTimeout(time)</code></p>
</blockquote>
<p>间隔一段时间。只进行一次动画</p>
<blockquote>
<p><code>setInterval</code></p>
</blockquote>
<blockquote>
<p><code>clearTimeout(timer)</code></p>
</blockquote>
<p>终止未进行的动画</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/28/jQuery扩展之动画/" data-id="ck4r400t000all0w0j2pa0i40" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-jQuery事件" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/27/jQuery事件/" class="article-date">
  <time datetime="2019-09-27T07:42:27.000Z" itemprop="datePublished">2019-09-27</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/jQuery/">jQuery</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/27/jQuery事件/">jQuery事件</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="鼠标事件"><a href="#鼠标事件" class="headerlink" title="鼠标事件"></a>鼠标事件</h2><blockquote>
<p><code>click([[data], fn])、dblclick([[data], fn])</code></p>
</blockquote>
<p>click：鼠标单击时触发</p>
<p>dblclick：鼠标双击时触发</p>
<blockquote>
<p><code>mousedown、mouseup</code></p>
</blockquote>
<p>mousedown：鼠标按下时触发</p>
<p>mouseup：按下的鼠标放松是触发</p>
<blockquote>
<p><code>mouseenter、mouseleave</code></p>
</blockquote>
<p>鼠标进入（移出）时触发</p>
<blockquote>
<p><code>hover([over], out)</code></p>
</blockquote>
<p>鼠标进入和退出时触发两个函数，相当于 mouseenter 加上 mouseleave</p>
<blockquote>
<p><code>mouseover、mouseout</code></p>
</blockquote>
<p>鼠标进入（移出）指定元素及其子元素时触发</p>
<blockquote>
<p><code>mousemove([[data], fn])</code></p>
</blockquote>
<p>在 DOM 内部移动时，会发生 mousemove 事件</p>
<blockquote>
<p><code>scroll([[data], fn])</code></p>
</blockquote>
<p>当滚动指定的元素时，会发生 scroll 事件</p>
<h2 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h2><blockquote>
<p><code>keydown([[data], fn])</code></p>
</blockquote>
<p>当键盘或按钮被按下时，发生 keydown 事件</p>
<blockquote>
<p><code>keyup([[data], fn])</code></p>
</blockquote>
<p>当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上</p>
<blockquote>
<p><code>keypress([[data], fn])</code></p>
</blockquote>
<p>当键盘或按钮被按下时，发生 keypress 事件</p>
<h2 id="其他事件"><a href="#其他事件" class="headerlink" title="其他事件"></a>其他事件</h2><blockquote>
<p><code>ready(fn)</code></p>
</blockquote>
<p>当 DOM 载入就绪可以查询及操纵时绑定一个要执行的函数</p>
<blockquote>
<p><code>resize([[data], fn])</code></p>
</blockquote>
<p>当调整浏览器窗口大小时，发生 resize 事件</p>
<blockquote>
<p><code>focus([[data], fn])、blur([[data], fn])</code></p>
</blockquote>
<p>当元素获得（失去）焦点时触发focus（blur）事件</p>
<blockquote>
<p><code>change([[data], fn])</code></p>
</blockquote>
<p>当元素的值发生改变时，会发生 change 事件</p>
<blockquote>
<p><code>select([[data], fn])</code></p>
</blockquote>
<p>当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件</p>
<blockquote>
<p><code>submit([[data], fn])</code></p>
</blockquote>
<p>当提交表单时，会发生 submit 事件</p>
<p>注：如果 submit 事件中的函数返回值为 false，表单不会提交</p>
<h2 id="事件参数"><a href="#事件参数" class="headerlink" title="事件参数"></a>事件参数</h2><h3 id="event"><a href="#event" class="headerlink" title="event"></a>event</h3><p>有些事件，如 mousemove 和 keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。所有事件都会传入 event 对象作为参数，可以从 event 对象上获取到更多的信息</p>
<h2 id="事件绑定与取消"><a href="#事件绑定与取消" class="headerlink" title="事件绑定与取消"></a>事件绑定与取消</h2><blockquote>
<p><code>on(events, [selector], [data], fn)</code></p>
</blockquote>
<p>在选择元素上绑定一个或多个事件的事件处理函数</p>
<blockquote>
<p><code>off(events, [selector], [fn])</code></p>
</blockquote>
<p>在选择元素上移除一个或多个事件的事件处理函数</p>
<blockquote>
<p><code>one(type, [data], fn)</code></p>
</blockquote>
<p>为每一个匹配元素的特定事件（比如 click ）绑定一个一次性的事件处理函数</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/27/jQuery事件/" data-id="ck4r400sw00agl0w047c9vsg3" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript进阶知识点-AJAX及JSON" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/26/JavaScript进阶知识点-AJAX及JSON/" class="article-date">
  <time datetime="2019-09-26T04:35:35.000Z" itemprop="datePublished">2019-09-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/26/JavaScript进阶知识点-AJAX及JSON/">JavaScript进阶知识点--AJAX及JSON</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="AJAX"><a href="#AJAX" class="headerlink" title="AJAX"></a>AJAX</h1><h2 id="关于-AJAX"><a href="#关于-AJAX" class="headerlink" title="关于 AJAX"></a>关于 AJAX</h2><h3 id="什么是-AJAX"><a href="#什么是-AJAX" class="headerlink" title="什么是 AJAX"></a>什么是 AJAX</h3><p>AJAX 的全称是 Asynchronous JavaScript and XML（即异步的 JavaScript 和 XML，它并不是一种新的编程语言，而是几种原有技术的结合体</p>
<p>AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术</p>
<h3 id="为什么要使用-AJAX？"><a href="#为什么要使用-AJAX？" class="headerlink" title="为什么要使用 AJAX？"></a>为什么要使用 AJAX？</h3><h4 id="AJAX-的优点"><a href="#AJAX-的优点" class="headerlink" title="AJAX 的优点"></a>AJAX 的优点</h4><ul>
<li><p>通过异步模式，提升了用户体验</p>
</li>
<li><p>优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用</p>
</li>
<li><p>AJAX 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载</p>
</li>
</ul>
<h4 id="AJAX-的缺点"><a href="#AJAX-的缺点" class="headerlink" title="AJAX 的缺点"></a>AJAX 的缺点</h4><ul>
<li><p>不支持浏览器 back 按钮</p>
</li>
<li><p>安全问题 AJAX 暴露了与服务器交互的细节</p>
</li>
<li><p>对搜索引擎的支持比较弱</p>
</li>
</ul>
<h2 id="XMLHTTPRequest-对象"><a href="#XMLHTTPRequest-对象" class="headerlink" title="XMLHTTPRequest 对象"></a>XMLHTTPRequest 对象</h2><h3 id="什么是-XMLHTTPRequest？"><a href="#什么是-XMLHTTPRequest？" class="headerlink" title="什么是 XMLHTTPRequest？"></a>什么是 XMLHTTPRequest？</h3><p>是一种支持异步请求的技术，它是 AJAX 的核心</p>
<h3 id="XMLHTTPRequest-的作用"><a href="#XMLHTTPRequest-的作用" class="headerlink" title="XMLHTTPRequest 的作用"></a>XMLHTTPRequest 的作用</h3><ul>
<li><p>可以先服务器提出请求并处理响应，而不阻塞用户</p>
</li>
<li><p>可以在页面加载以后进行页面的局部更新</p>
</li>
</ul>
<h2 id="如何使用-AJAX？"><a href="#如何使用-AJAX？" class="headerlink" title="如何使用 AJAX？"></a>如何使用 AJAX？</h2><p>要完整实现一个 AJAX 异步调用和局部刷新，通常需要以下几个步骤</p>
<ul>
<li><p>创建 XMLHTTPRequest 对象，也就是创建一个异步调用对象</p>
</li>
<li><p>创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL</p>
</li>
<li><p>设置响应 HTTP 请求状态变化的函数</p>
</li>
<li><p>发送 HTTP 请求</p>
</li>
<li><p>获取异步调用返回的数据</p>
</li>
<li><p>使用 JavaScript 和 DOM 实现局部刷新</p>
</li>
</ul>
<h2 id="如何创建-HTTP-请求"><a href="#如何创建-HTTP-请求" class="headerlink" title="如何创建 HTTP 请求"></a>如何创建 HTTP 请求</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>open(method, url, async)</p>
</blockquote>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>创建 HTTP 请求，规定请求的类型、URL及是否异步处理请求</p>
<h3 id="参数说明："><a href="#参数说明：" class="headerlink" title="参数说明："></a>参数说明：</h3><ul>
<li><p><code>method</code>：请求类型，GET或POST</p>
</li>
<li><p><code>url</code>：文件在服务器上的位置</p>
</li>
<li><p><code>async</code>：true（异步）或 false（同步）</p>
</li>
</ul>
<h3 id="注意事项："><a href="#注意事项：" class="headerlink" title="注意事项："></a>注意事项：</h3><p><code>open</code> 方法不会向服务器发送真正请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议和端口的URL发送请求，否则会因为安全原因报错</p>
<h4 id="URL"><a href="#URL" class="headerlink" title="URL"></a>URL</h4><p><code>url</code> 参数是 <code>open()</code> 方法中唯一一个必须要指定的参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如.txt 和 .xml，或者服务器脚本文件，如.asp 和 .php（在传回响应之前，能够在服务器上执行任务）</p>
<h4 id="GET-和-POST-的区别"><a href="#GET-和-POST-的区别" class="headerlink" title="GET 和 POST 的区别"></a>GET 和 POST 的区别</h4><p>与 <code>POST</code> 相比，<code>GET</code> 更简单也更快，并且在大部分情况下都能用，然而，在以下情况中，必须使用 POST 请求：</p>
<ul>
<li><p>无法使用缓存文件（更新服务器上的文件或数据库）</p>
</li>
<li><p>向服务器发送大量数据（POST 没有数据量限制）</p>
</li>
<li><p>发送包含未知字符的用户输入时，<code>POST</code> 比 <code>GET</code> 更稳定也更可靠</p>
</li>
</ul>
<h4 id="同步和异步的区别"><a href="#同步和异步的区别" class="headerlink" title="同步和异步的区别"></a>同步和异步的区别</h4><ul>
<li><p>同步：提交请求 -&gt; 等待服务器处理 -&gt; 处理完毕返回 这个期间客户端浏览器不能干任何事</p>
</li>
<li><p>异步：请求通过事件触发 -&gt; 服务器处理（这是浏览器仍然可以作其他事情）-&gt; 处理完毕</p>
</li>
</ul>
<h4 id="async"><a href="#async" class="headerlink" title="async"></a>async</h4><p>说明：<code>async</code> 是一个布尔值。</p>
<p>如果是异步通信方式（true），客户机就不等待服务器的响应</p>
<p>如果是同步方式（false），客户机就要等到服务器返回消息后才去执行其他操作</p>
<h2 id="设置响应-HTTP-请求状态变化的函数"><a href="#设置响应-HTTP-请求状态变化的函数" class="headerlink" title="设置响应 HTTP 请求状态变化的函数"></a>设置响应 HTTP 请求状态变化的函数</h2><p>请求发往服务器 -&gt; 服务器根据请求生成响应 -&gt; 传回给 XHR 对象</p>
<p>在收到响应后相应数据会填充到 XHR 对象的属性，有四个相关属性会被填充：</p>
<ul>
<li><p>responseText：从服务器进程返回数据的字符形式</p>
</li>
<li><p>responseXML：从服务器进程返回的 DOM 兼容的文档数据对象</p>
</li>
<li><p>status：从服务器返回的数字代码，如 404（未找到）和200（已就绪）</p>
</li>
<li><p>statusText：伴随状态码的字符串信息</p>
</li>
</ul>
<h2 id="如何发送请求"><a href="#如何发送请求" class="headerlink" title="如何发送请求"></a>如何发送请求</h2><h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>send(string)</p>
</blockquote>
<h3 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h3><p>将请求发送到服务器</p>
<h3 id="参数说明"><a href="#参数说明" class="headerlink" title="参数说明"></a>参数说明</h3><p>string 仅用于 post 请求</p>
<h3 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h3><p>仅在 POST 请求时可以传入参数，不需要则发送 null，在调用 send 方法之后请求被发往服务器</p>
<h2 id="如何添加-HTTP-头"><a href="#如何添加-HTTP-头" class="headerlink" title="如何添加 HTTP 头"></a>如何添加 HTTP 头</h2><p>如果需要像 HTML 表单那样 POST 数据，需使用 setRequestHeader() 来添加 HTTP 头，然后在 send() 方法中规定希望发送的数据</p>
<h3 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>xmlhttp.setRequestHeader(header, value)</p>
</blockquote>
<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xmlhttp.setRequestHeader(&quot;Content-type&quot;, &quot;application/x-www-form-urlencoded&quot;);</span><br></pre></td></tr></table></figure>

<h1 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h1><h2 id="什么是-JSON？"><a href="#什么是-JSON？" class="headerlink" title="什么是 JSON？"></a>什么是 JSON？</h2><p>JSON（JavaScript object notation）全称是 JavaScript 对象表示法，它是一种数据交换的文本格式，而不是一种编程语言，用于读取结构化数据，2001年由 Douglas Crockford 提出，目的是取代繁琐笨重的 XML 格式</p>
<h2 id="JSON-的语法规则"><a href="#JSON-的语法规则" class="headerlink" title="JSON 的语法规则"></a>JSON 的语法规则</h2><p>JSON 的语法可以表示以下三种类型的值：</p>
<h3 id="简单值："><a href="#简单值：" class="headerlink" title="简单值："></a>简单值：</h3><p>简单值使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和 null</p>
<p>字符串必须使用双引号表示，不能使用单引号，数值必须以十进制表示，且不能使用 NaN 和 Infinity</p>
<p>说明：JSON 不支持 JavaScript 中的特殊值 undefined</p>
<h3 id="对象："><a href="#对象：" class="headerlink" title="对象："></a>对象：</h3><p>对象作为一种复杂数据类型，表示的是一组有序的键值对，而每个键值对中的值可以是简单值，也可以是复杂数据类型的值</p>
<p>JSON 中对象的键名必须放在双引号里面，因为 JSON 不是 JavaScript 语句，所以没有末尾的分号</p>
<p>说明：同一个对象不应该出现两个同名属性</p>
<h3 id="数组："><a href="#数组：" class="headerlink" title="数组："></a>数组：</h3><p>数组也是一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值</p>
<p>说明：数组或对象最后一个成员的后面，不能加逗号</p>
<h1 id="JSON-对象"><a href="#JSON-对象" class="headerlink" title="JSON 对象"></a>JSON 对象</h1><p>JSON 对象的两个方法：</p>
<h2 id="parse"><a href="#parse" class="headerlink" title="parse()"></a>parse()</h2><h3 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>JSON.parse()</p>
</blockquote>
<h3 id="功能-2"><a href="#功能-2" class="headerlink" title="功能"></a>功能</h3><p>用于将 JSON 字符串转换成对象</p>
<h2 id="stringify"><a href="#stringify" class="headerlink" title="stringify()"></a>stringify()</h2><h3 id="语法-4"><a href="#语法-4" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>JSON.stringify()</p>
</blockquote>
<h3 id="功能-3"><a href="#功能-3" class="headerlink" title="功能"></a>功能</h3><p>用于将一个值转为字符串，该字符串应该符合 JSON 格式，并且可以被 JSON.parse()方法还原</p>
<h2 id="JSON-对象总结"><a href="#JSON-对象总结" class="headerlink" title="JSON 对象总结"></a>JSON 对象总结</h2><ul>
<li><p>JSON 之所以流行，是因为可以把 JSON 数据结构解析为有用的 JavaScript 对象</p>
</li>
<li><p>JSON 对象 的 stringify()和 parse()这两个方法可以分别用于把 JavaScript 对象序列化为 JSON 字符串和把 JSON 字符串解析为原生 JavaScript 值</p>
</li>
<li><p>JavaScript 的 eval() 类似于 JSON.parse() 方法，可以将 json 字符串转换为 json 对象，但是，eval() 可以执行不符合 JSON 格式的代码，有可能会包含恶意代码，所以尽量少用</p>
</li>
</ul>
<h1 id="jQuery-的-ajax-方法"><a href="#jQuery-的-ajax-方法" class="headerlink" title="jQuery 的 ajax 方法"></a>jQuery 的 ajax 方法</h1><ul>
<li><p><code>$.ajax()</code></p>
</li>
<li><p><code>$.get()</code></p>
</li>
<li><p><code>$.post()</code></p>
</li>
<li><p><code>$.getJson()</code></p>
</li>
</ul>
<h1 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h1><h2 id="什么是同源策略"><a href="#什么是同源策略" class="headerlink" title="什么是同源策略"></a>什么是同源策略</h2><p>所谓同源是指：域名，协议，端口均相同</p>
<h2 id="什么是跨域"><a href="#什么是跨域" class="headerlink" title="什么是跨域"></a>什么是跨域</h2><p>跨域是指从一个域名的网页去请求另一个域名的资源，严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作跨域</p>
<h2 id="如何解决跨域"><a href="#如何解决跨域" class="headerlink" title="如何解决跨域"></a>如何解决跨域</h2><ul>
<li><p>跨域资源共享（CORS）</p>
</li>
<li><p>JSONP（常用）</p>
</li>
<li><p>修改 <code>document.domain</code></p>
</li>
<li><p>使用 <code>window.name</code></p>
</li>
</ul>
<h2 id="如何使用-JSONP-解决跨域"><a href="#如何使用-JSONP-解决跨域" class="headerlink" title="如何使用 JSONP 解决跨域"></a>如何使用 JSONP 解决跨域</h2><h3 id="什么是-JSONP"><a href="#什么是-JSONP" class="headerlink" title="什么是 JSONP"></a>什么是 JSONP</h3><p>JSONP 是 JSON with Padding（填充式json）的简写，是应用 JSON 的一种新方法，也是一种跨域解决方案</p>
<h3 id="JSONP-的组成"><a href="#JSONP-的组成" class="headerlink" title="JSONP 的组成"></a>JSONP 的组成</h3><p>JSONP 由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的 JSON 数据</p>
<h3 id="JSONP-的原理"><a href="#JSONP-的原理" class="headerlink" title="JSONP 的原理"></a>JSONP 的原理</h3><p>直接用 XMLHTTPRequest 请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的 js 脚本文件却是可以的，JSONP 正是利用这个特性来实现的</p>
<p>通过 script 标签引入 js 文件 -&gt; js 文件载入成功后 -&gt; 执行我们在 url 参数中指定的函数</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/26/JavaScript进阶知识点-AJAX及JSON/" data-id="ck4r400r4006ul0w027cvmijd" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-jQuery选择器" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/24/jQuery选择器/" class="article-date">
  <time datetime="2019-09-24T13:35:07.000Z" itemprop="datePublished">2019-09-24</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/jQuery/">jQuery</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/24/jQuery选择器/">jQuery选择器</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h1><p>返回的都是 jQuery 对象</p>
<p>类似数组，每个元素都是一个引用了 DOM 节点的对象</p>
<p>不会返回 undefined 或者 null</p>
<p>不必在下一行判断 if（div === undefined）</p>
<ul>
<li><p>基本选择器</p>
</li>
<li><p>多项选择器</p>
</li>
<li><p>层级选择器</p>
</li>
<li><p>属性选择器</p>
</li>
<li><p>过滤器</p>
</li>
<li><p>表单相关</p>
</li>
<li><p>查找和过滤</p>
</li>
</ul>
<h2 id="基本选择器"><a href="#基本选择器" class="headerlink" title="基本选择器"></a>基本选择器</h2><ul>
<li><p><code>#id</code>：根据给定的 ID 匹配一个元素</p>
</li>
<li><p><code>element</code>：根据给定的元素标签名匹配所有元素</p>
</li>
<li><p><code>.class</code>：根据给定的 css 类名匹配元素</p>
</li>
<li><p><code>*</code>：匹配所有元素</p>
</li>
</ul>
<h2 id="多项选择器"><a href="#多项选择器" class="headerlink" title="多项选择器"></a>多项选择器</h2><blockquote>
<p><code>$(&quot;selector1, selector2, selectorN&quot;);</code></p>
</blockquote>
<p>将每一个选择器匹配到的元素合并后一起返回</p>
<p>可以指定任意多个选择器，并将匹配到的元素合并到一个结果内</p>
<h2 id="层级选择器"><a href="#层级选择器" class="headerlink" title="层级选择器"></a>层级选择器</h2><blockquote>
<p><code>$(&#39;ancestor descendant&#39;)</code></p>
</blockquote>
<p>在给定的祖先元素下匹配所有的后代元素</p>
<blockquote>
<p><code>$(&#39;parent &gt; child&#39;)</code></p>
</blockquote>
<p>在给定的父元素下匹配所有的子元素</p>
<blockquote>
<p><code>$(&#39;prev + next&#39;)</code></p>
</blockquote>
<p>匹配所有紧接在 prev 元素后的 next 元素</p>
<blockquote>
<p><code>$(&#39;prev ~ siblings&#39;)</code></p>
</blockquote>
<p>匹配 prev 元素之后的所有 siblings 元素</p>
<h2 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h2><ul>
<li><p><code>[attribute]</code></p>
</li>
<li><p><code>[attribute = value]</code></p>
</li>
<li><p><code>[attribute != value]</code></p>
</li>
<li><p><code>[attribute ^= value]</code></p>
</li>
<li><p><code>[attribute $= value]</code></p>
</li>
<li><p><code>[attribute *= value]</code></p>
</li>
<li><p><code>[selector1][selector2][selectorN]</code></p>
</li>
</ul>
<p><a href="https://youchen12138.github.io/2019/08/14/CSS%E8%BF%9B%E9%98%B6%E7%9F%A5%E8%AF%86%E7%82%B9-CSS3%E5%9F%BA%E6%9C%AC%E9%80%89%E6%8B%A9%E5%99%A8%E5%8F%8A%E5%B1%9E%E6%80%A7%E9%80%89%E6%8B%A9%E5%99%A8/" target="_blank" rel="noopener">请参照该链接，以便更加了解属性选择器</a></p>
<h2 id="过滤器"><a href="#过滤器" class="headerlink" title="过滤器"></a>过滤器</h2><h3 id="child-系列"><a href="#child-系列" class="headerlink" title="child 系列"></a>child 系列</h3><ul>
<li><p><code>:first-child</code></p>
</li>
<li><p><code>:last-child</code></p>
</li>
<li><p><code>:nth-child(n | even | odd | formula)</code></p>
</li>
<li><p><code>:nth-last-child(n | even | odd | formula)</code></p>
</li>
<li><p><code>:only-child</code></p>
</li>
</ul>
<h3 id="type-系列"><a href="#type-系列" class="headerlink" title="type 系列"></a>type 系列</h3><ul>
<li><p><code>:first-type-child</code></p>
</li>
<li><p><code>:last-type-child</code></p>
</li>
<li><p><code>:nth-type-child(n | even | odd | formula)</code></p>
</li>
<li><p><code>:nth-type-last-child(n | even | odd | formula)</code></p>
</li>
<li><p><code>:only-type-child</code></p>
</li>
</ul>
<h3 id="表单相关"><a href="#表单相关" class="headerlink" title="表单相关"></a>表单相关</h3><table>
<thead>
<tr>
<th>快速选择表单元素</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>:input</code></td>
<td>可以选择<code>&lt;input&gt;</code>，<code>&lt;select&gt;</code>，<code>&lt;textarea&gt;</code>和<code>&lt;button&gt;</code></td>
</tr>
<tr>
<td><code>:text</code></td>
<td>匹配所有的单行文本框，和 <code>input[type=&quot;text&quot;]</code>一样</td>
</tr>
<tr>
<td>其他 input 的 type</td>
<td><code>:passowrd/:radio/:checkbox/:image/:reset/:button/:file</code></td>
</tr>
</tbody></table>
<h3 id="表单状态"><a href="#表单状态" class="headerlink" title="表单状态"></a>表单状态</h3><table>
<thead>
<tr>
<th>根据表单状态选择表单元素</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td><code>:enabled</code></td>
<td>匹配所有可用元素</td>
</tr>
<tr>
<td><code>:disabled</code></td>
<td>匹配所有不可用元素</td>
</tr>
<tr>
<td><code>:checked</code></td>
<td>匹配所有选中的被选中元素（复选框，单选框等，select 中的 option）</td>
</tr>
<tr>
<td><code>:selected</code></td>
<td>匹配所有选中的 option 元素</td>
</tr>
</tbody></table>
<h2 id="查找与过滤"><a href="#查找与过滤" class="headerlink" title="查找与过滤"></a>查找与过滤</h2><blockquote>
<p><code>find(expr | object | element)</code></p>
</blockquote>
<p>搜索所有与指定表达式匹配的元素</p>
<blockquote>
<p><code>children([expr])</code></p>
</blockquote>
<p>取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合</p>
<blockquote>
<p><code>parent([expr])</code></p>
</blockquote>
<p>取得一个包含着所有匹配元素的唯一父元素的集合</p>
<blockquote>
<p><code>next([expr])、prev([expr])</code></p>
</blockquote>
<p>取得一个包含匹配的元素结合中每一个元素紧邻的后面（前面）同辈元素的元素集合</p>
<blockquote>
<p><code>eq(index | -index)</code></p>
</blockquote>
<p>获取当前链式操作中第 N 个jQuery 对象</p>
<blockquote>
<p><code>siblings([expr])</code></p>
</blockquote>
<p>取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合</p>
<blockquote>
<p><code>filter(expr | object | element | fn)</code></p>
</blockquote>
<p>筛选出与指定表达式匹配的元素集合</p>
<h3 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h3><p>expr：字符串值，包含供匹配当前元素集合的选择器表达式</p>
<p>object：现有的 jQuery 对象，以匹配当前的元素</p>
<p>element：一个用于匹配元素的 DOM 元素</p>
<p>fn：一个函数用来作为测试元素的集合</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/24/jQuery选择器/" data-id="ck4r400t400arl0w070bxbk3p" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-jQuery入门" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/23/jQuery入门/" class="article-date">
  <time datetime="2019-09-23T07:43:58.000Z" itemprop="datePublished">2019-09-23</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/jQuery/">jQuery</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/23/jQuery入门/">jQuery入门¨</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h2 id="jQuery是什么"><a href="#jQuery是什么" class="headerlink" title="jQuery是什么"></a>jQuery是什么</h2><p>jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使 HTML 文档的遍历和操作、事件处理、动画和 Ajax 等操作变得更加简单，并提供了一个易于使用的 API ，可以跨多种浏览器工作。jQuery 集多功能性和可扩展性于一身，改变了数百万人编写 JavaScript 的方式</p>
<p>jQuery 是一个请年假的“写得少，做得多” 的 JavaScript 库</p>
<h2 id="通过-ID-获取一个-HTML-元素"><a href="#通过-ID-获取一个-HTML-元素" class="headerlink" title="通过 ID 获取一个 HTML 元素"></a>通过 ID 获取一个 HTML 元素</h2><h3 id="JavaScript"><a href="#JavaScript" class="headerlink" title="JavaScript"></a>JavaScript</h3><p><code>var obj = document.getElementById(&#39;idValue&#39;)</code></p>
<h3 id="jQuery"><a href="#jQuery" class="headerlink" title="jQuery"></a>jQuery</h3><p><code>var obj = $(&#39;idValue)</code></p>
<h2 id="将一个-HTML-元素隐藏"><a href="#将一个-HTML-元素隐藏" class="headerlink" title="将一个 HTML 元素隐藏"></a>将一个 HTML 元素隐藏</h2><h3 id="JavaScript-1"><a href="#JavaScript-1" class="headerlink" title="JavaScript"></a>JavaScript</h3><p><code>document.getElementById(&#39;idValue&#39;).style.display = &#39;none&#39;</code></p>
<h3 id="jQuery-1"><a href="#jQuery-1" class="headerlink" title="jQuery"></a>jQuery</h3><p><code>$(&#39;idValue&#39;).hide()</code></p>
<h2 id="将一个-HTML-元素的宽度变成-200px"><a href="#将一个-HTML-元素的宽度变成-200px" class="headerlink" title="将一个 HTML 元素的宽度变成 200px"></a>将一个 HTML 元素的宽度变成 200px</h2><h3 id="JavaScript-2"><a href="#JavaScript-2" class="headerlink" title="JavaScript"></a>JavaScript</h3><p><code>document.getElementById(&#39;idValue&#39;).style.width = &#39;200px&#39;</code></p>
<h3 id="jQuery-2"><a href="#jQuery-2" class="headerlink" title="jQuery"></a>jQuery</h3><p><code>$(&#39;idValue&#39;).css(&#39;width&#39;, &#39;200px&#39;)</code></p>
<h2 id="jQuery-的作用"><a href="#jQuery-的作用" class="headerlink" title="jQuery 的作用"></a>jQuery 的作用</h2><ul>
<li><p>HTML 元素的选取</p>
</li>
<li><p>HTML 元素操作</p>
</li>
<li><p>CSS 操作</p>
</li>
<li><p>HTML 事件函数</p>
</li>
<li><p>JavaScript 特效和动画</p>
</li>
<li><p>HTML DOM 遍历和修改</p>
</li>
<li><p>AJAX</p>
</li>
<li><p>Utilities</p>
</li>
</ul>
<h2 id="jQuery-的版本"><a href="#jQuery-的版本" class="headerlink" title="jQuery 的版本"></a>jQuery 的版本</h2><h3 id="版本分类"><a href="#版本分类" class="headerlink" title="版本分类"></a>版本分类</h3><blockquote>
<p><code>jQuery1.x.x/jQuery2.x.x/jQuery3.x.x</code></p>
</blockquote>
<p>IE 6/7/8兼容最高版本为 jQuery1.9.1</p>
<h2 id="jQuery-的优势"><a href="#jQuery-的优势" class="headerlink" title="jQuery 的优势"></a>jQuery 的优势</h2><ul>
<li><p>轻量级</p>
</li>
<li><p>强大的选择器</p>
</li>
<li><p>出色的 DOM 操作及其封装</p>
</li>
<li><p>可靠的事件处理机制</p>
</li>
<li><p>完善的 Ajax</p>
</li>
<li><p>不污染顶级变量</p>
</li>
<li><p>出色的浏览器兼容性</p>
</li>
<li><p>链式操作方式</p>
</li>
<li><p>隐式迭代</p>
</li>
<li><p>行为层和结构层的分离</p>
</li>
<li><p>丰富的插件支持</p>
</li>
</ul>
<h1 id="jQuery-使用"><a href="#jQuery-使用" class="headerlink" title="jQuery 使用"></a>jQuery 使用</h1><h2 id="jQuery-的引入"><a href="#jQuery-的引入" class="headerlink" title="jQuery 的引入"></a>jQuery 的引入</h2><ul>
<li><p>常规引入</p>
<p>  使用 jQuery 只需要在页面的<code>&lt;head&gt;</code>中引入 jQuery 文件即可：</p>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;script src=&quot;jQueryPath/jquery.js&quot;&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="符号"><a href="#符号" class="headerlink" title="$ 符号"></a>$ 符号</h2><ul>
<li><p>jQuery 符号</p>
<p>  jQuery 把所有功能全部封装在一个全局变量 jQuery 中，而 $ 也是一个合法的变量名，它是变量 jQuery 的别名</p>
</li>
<li><p>$ 使用</p>
</li>
</ul>
<p>绝大多数时候，我们都直接用 $</p>
<p>若 $ 变量已被占用，且不能改，就只能使用 jQuery 这个变量</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/23/jQuery入门/" data-id="ck4r400sx00ahl0w0v0hkoknz" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript进阶知识点-正则表达式" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/19/JavaScript进阶知识点-正则表达式/" class="article-date">
  <time datetime="2019-09-19T11:47:51.000Z" itemprop="datePublished">2019-09-19</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/19/JavaScript进阶知识点-正则表达式/">JavaScript进阶知识点--正则表达式</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h1><h2 id="什么是正则表达式"><a href="#什么是正则表达式" class="headerlink" title="什么是正则表达式"></a>什么是正则表达式</h2><p>由以下两种字符组成的文字模式</p>
<ol>
<li><p>普通字符（例如26个英文字母、数字、汉字、<code>_</code>、<code>,</code>，不含有特殊含义的符号等）</p>
</li>
<li><p>特殊字符（有特殊含义的，例如<code>.\</code>等）</p>
</li>
</ol>
<p>该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与说搜索的字符串进行匹配</p>
<p>正则表达式匹配的一定是字符串中的内容</p>
<h2 id="方法"><a href="#方法" class="headerlink" title="方法"></a>方法</h2><h3 id="test"><a href="#test" class="headerlink" title="test"></a>test</h3><p>如果找到，则返回 true</p>
<p>如果未找到，则返回 false</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;I love js&quot;;</span><br><span class="line">var pattern = /js/;</span><br><span class="line"></span><br><span class="line">console.log(pattern.test(str));</span><br></pre></td></tr></table></figure>

<h3 id="exec"><a href="#exec" class="headerlink" title="exec"></a>exec</h3><p>如果找到，则将在字符串中找到的该字符传入一个数组中，并将该数组返回</p>
<p>如果未找到，则返回 null</p>
<h2 id="flags"><a href="#flags" class="headerlink" title="flags"></a>flags</h2><table>
<thead>
<tr>
<th>flags</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>g</td>
<td>表示全局(global)模式，即模式将被应用于所有字符串，而非在发现第一个匹配项时立即停止</td>
</tr>
<tr>
<td>i</td>
<td>表示不区分(case-insensitive)模式，即在确定匹配项时忽略模式与字符串的大小写</td>
</tr>
<tr>
<td>m</td>
<td>表示多行模式，即在到达一行文本末尾时还会继续查找下一行中是否存在于模式匹配的项</td>
</tr>
</tbody></table>
<h1 id="转义字符"><a href="#转义字符" class="headerlink" title="转义字符"></a>转义字符</h1><ul>
<li><p>如果使用字面量的方式定义正则，一个反斜杠转义</p>
</li>
<li><p>如果使用构造函数方式定义正则，需要用到双重反斜杠</p>
</li>
</ul>
<p>有问请查看文件中的<code>特殊字符总结</code>，<code>常用正则表达式总结</code></p>
<table>
<thead>
<tr>
<th>常用的字符类</th>
<th>意义</th>
</tr>
</thead>
<tbody><tr>
<td><code>/./</code></td>
<td>表示除了换行符之外的所有字符</td>
</tr>
<tr>
<td><code>/\w/</code></td>
<td>等同于<code>/[a-zA-Z0-9_]/</code></td>
</tr>
<tr>
<td><code>/\W/</code></td>
<td>等同于<code>/[^a-zA-Z0-9_]/</code></td>
</tr>
<tr>
<td><code>/\d/</code></td>
<td>等同于<code>/[0-9]/</code></td>
</tr>
<tr>
<td><code>/\D/</code></td>
<td>等同于<code>/[^0-9]/</code></td>
</tr>
<tr>
<td><code>/\s/</code></td>
<td>匹配空格和制表符之类的</td>
</tr>
<tr>
<td><code>/\S/</code></td>
<td>匹配空格和制表符之类的空白字符以外的所有字符</td>
</tr>
<tr>
<td><code>/\b/</code></td>
<td>单词的边界匹配</td>
</tr>
</tbody></table>
<p>中文的 Unicode 编码为<code>\u4e00-\u9fa5</code></p>
<h1 id="重复"><a href="#重复" class="headerlink" title="重复"></a>重复</h1><p>以下均为贪婪匹配</p>
<p>代码示例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 匹配n个字符 --&gt;</span><br><span class="line">var str = &quot;110&quot;;</span><br><span class="line">var pattern = /\d&#123;3&#125;/; // &#123;&#125;中表示匹配的个数</span><br><span class="line">console.log(pattern.exec(str)); // [&quot;110&quot;]</span><br><span class="line"></span><br><span class="line">&lt;!-- 匹配至少n个字符 --&gt;</span><br><span class="line">var str = &quot;110&quot;;</span><br><span class="line">var pattern = /\d&#123;1,&#125;/; // 至少1个</span><br><span class="line">console.log(pattern.exec(str)); // [&quot;110&quot;]</span><br><span class="line"></span><br><span class="line">&lt;!-- 匹配n个到m个 --&gt;</span><br><span class="line">var str = &quot;110&quot;;</span><br><span class="line">var pattern = /\d&#123;0,1&#125;/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;1&quot;]</span><br><span class="line"></span><br><span class="line">&lt;!-- 匹配0个或者1个 --&gt;</span><br><span class="line">var str = &quot;110&quot;;</span><br><span class="line">var pattern = /\d?/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;1&quot;]</span><br><span class="line"></span><br><span class="line">&lt;!-- 至少匹配1个 --&gt;</span><br><span class="line">var str = &quot;110&quot;;</span><br><span class="line">var pattern = /\d+/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;110&quot;]</span><br><span class="line"></span><br><span class="line">&lt;!-- 至少匹配0个 --&gt;</span><br><span class="line">var str = &quot;110&quot;;</span><br><span class="line">var pattern = /\d*/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;110&quot;]</span><br></pre></td></tr></table></figure>

<h2 id="非贪婪匹配"><a href="#非贪婪匹配" class="headerlink" title="非贪婪匹配"></a>非贪婪匹配</h2><p>在量词后面加<code>?</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 至少匹配1个 --&gt;</span><br><span class="line">var str = &quot;110&quot;;</span><br><span class="line">var pattern = /\d+?/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;1&quot;]</span><br></pre></td></tr></table></figure>

<h1 id="选择、分组、引用"><a href="#选择、分组、引用" class="headerlink" title="选择、分组、引用"></a>选择、分组、引用</h1><h2 id="选择"><a href="#选择" class="headerlink" title="选择"></a>选择</h2><p>代码示例</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;html js&quot;;</span><br><span class="line">var pattern = /html|css|js/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;html&quot;]</span><br></pre></td></tr></table></figure>

<h2 id="分组"><a href="#分组" class="headerlink" title="分组"></a>分组</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;ababab&quot;;</span><br><span class="line">var pattern = /(ab)+/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;ababab&quot;, &quot;ab&quot;]</span><br><span class="line"></span><br><span class="line">&lt;!-- 非捕获性分组 --&gt;</span><br><span class="line">var str = &quot;ababab&quot;;</span><br><span class="line">var pattern = /(?:ab)+/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;ababab&quot;]</span><br></pre></td></tr></table></figure>

<h2 id="引用"><a href="#引用" class="headerlink" title="引用"></a>引用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 捕获性分组的引用 --&gt;</span><br><span class="line">var str = &quot;ab cd ab&quot;;</span><br><span class="line">var pattern = /(ab) cd \1/; </span><br><span class="line">console.log(pattern.exec(str)); // [&quot;ab cd ab&quot;, &quot;ab&quot;]</span><br></pre></td></tr></table></figure>

<h1 id="首尾匹配"><a href="#首尾匹配" class="headerlink" title="首尾匹配"></a>首尾匹配</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 首匹配 --&gt;</span><br><span class="line">var str1 = &quot;js&quot;;</span><br><span class="line">var str2 = &quot;html js&quot;;</span><br><span class="line">var pattern = /^js/;</span><br><span class="line">console.log(pattern.exec(str1)); // [&quot;js&quot;]</span><br><span class="line">console.log(pattern.exec(str2)); // null</span><br><span class="line"></span><br><span class="line">&lt;!-- 尾匹配 --&gt;</span><br><span class="line">var str1 = &quot;js&quot;;</span><br><span class="line">var str2 = &quot;js html&quot;;</span><br><span class="line">var pattern = /js$/;</span><br><span class="line">console.log(pattern.exec(str1)); // [&quot;js&quot;]</span><br><span class="line">console.log(pattern.exec(str2)); // null</span><br></pre></td></tr></table></figure>

<h1 id="前瞻性匹配"><a href="#前瞻性匹配" class="headerlink" title="前瞻性匹配"></a>前瞻性匹配</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 在这个例子中，只有java后面跟了script才会匹配成功 --&gt;</span><br><span class="line">var str = &apos;javascript&apos;;</span><br><span class="line">var pattern = /java(?=script)/;</span><br><span class="line">console.log(pattern.exec(str)); // [&quot;java&quot;]</span><br></pre></td></tr></table></figure>

<h1 id="负向前瞻性匹配"><a href="#负向前瞻性匹配" class="headerlink" title="负向前瞻性匹配"></a>负向前瞻性匹配</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 在这个例子中，如果java后面跟了script则不会匹配java --&gt;</span><br><span class="line">var str = &apos;javascript&apos;;</span><br><span class="line">var pattern = /java(?!script)/;</span><br><span class="line">console.log(pattern.exec(str)); // null</span><br></pre></td></tr></table></figure>

<h1 id="RegExp-的实例"><a href="#RegExp-的实例" class="headerlink" title="RegExp 的实例"></a>RegExp 的实例</h1><h2 id="方法-1"><a href="#方法-1" class="headerlink" title="方法"></a>方法</h2><table>
<thead>
<tr>
<th>方法</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>test(str)</td>
<td>返回布尔值。判断该字符串是否有该匹配式</td>
</tr>
<tr>
<td>exec(str)</td>
<td>返回数组。找到该匹配式，将匹配成功的字符放入数组中</td>
</tr>
<tr>
<td>toString()</td>
<td>返回字符串。将匹配式转换为字面量的字符串</td>
</tr>
<tr>
<td>toLocaleString()</td>
<td>返回本地字符。其实没多大区别</td>
</tr>
<tr>
<td>valueOf()</td>
<td>返回该匹配式的字符串形式</td>
</tr>
</tbody></table>
<h2 id="属性"><a href="#属性" class="headerlink" title="属性"></a>属性</h2><table>
<thead>
<tr>
<th>属性</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>ignoreCase</td>
<td>判断 flags 是否有i</td>
</tr>
<tr>
<td>global</td>
<td>判断 flags 是否有g</td>
</tr>
<tr>
<td>multiline</td>
<td>判断flags是否有m</td>
</tr>
<tr>
<td>source</td>
<td>返回字面量形式的字符串</td>
</tr>
<tr>
<td>lastIndex</td>
<td>返回数值。每次检索完毕的最终位置</td>
</tr>
</tbody></table>
<h2 id="构造函数属性"><a href="#构造函数属性" class="headerlink" title="构造函数属性"></a>构造函数属性</h2><table>
<thead>
<tr>
<th>构造函数属性</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>RegExp.input</td>
<td>返回检索的字符串</td>
</tr>
<tr>
<td>RegExp.$_</td>
<td>和 RegExp.input 作用相同</td>
</tr>
<tr>
<td>RegExp.lastMatch</td>
<td>返回最近一次匹配的字符</td>
</tr>
<tr>
<td>RegExp[‘$&amp;’]</td>
<td>和 RegExp.lastMatch 作用相同</td>
</tr>
<tr>
<td>RegExp.leftContext</td>
<td>上一次匹配左边剩余的字符</td>
</tr>
<tr>
<td>RegExp.rightContext</td>
<td>上一次匹配右边边剩余的字符</td>
</tr>
<tr>
<td>RegExp.lastParen</td>
<td>上一次捕获的分组的字符</td>
</tr>
<tr>
<td>RegExp.$1</td>
<td>第一个分组的引用，与<code>\1</code>作用相同</td>
</tr>
</tbody></table>
<h1 id="String对象中与正则表达式相关的方法"><a href="#String对象中与正则表达式相关的方法" class="headerlink" title="String对象中与正则表达式相关的方法"></a>String对象中与正则表达式相关的方法</h1><h2 id="search"><a href="#search" class="headerlink" title="search"></a>search</h2><p>返回一个 Number ，找到匹配的字符的位置</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;html js&quot;;</span><br><span class="line">var pattern = /js/;</span><br><span class="line">console.log(str.search(pattern)); // 5</span><br></pre></td></tr></table></figure>

<h2 id="match"><a href="#match" class="headerlink" title="match"></a>match</h2><p>和exec一样，返回的是一个类数组的对象</p>
<h3 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var str = &quot;js js js&quot;;</span><br><span class="line">var pattern = /js/g;</span><br><span class="line">console.log(str.match(pattern)); // [&quot;js&quot;, &quot;js&quot;, &quot;js&quot;]</span><br></pre></td></tr></table></figure>

<p><code>match</code>： 非全局的情况下才会返回分组中匹配到的内容，全局匹配只能匹配到所有匹配到的字符</p>
<p><code>exec</code>：无论是否全局匹配都会返回分组中匹配到的内容，都只会返回当前匹配到的一个内容，而不是全部返回</p>
<h2 id="replace"><a href="#replace" class="headerlink" title="replace"></a>replace</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 全部替换 --&gt;</span><br><span class="line">var str = &quot;I love js js&quot;;</span><br><span class="line">var pattern = /js/g;</span><br><span class="line">console.log(str.replace(pattern, &quot;html&quot;));</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/19/JavaScript进阶知识点-正则表达式/" data-id="ck4r400rd007dl0w0d1mkf4fv" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript进阶知识点-JS面向对象" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/15/JavaScript进阶知识点-JS面向对象/" class="article-date">
  <time datetime="2019-09-15T06:41:21.000Z" itemprop="datePublished">2019-09-15</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/15/JavaScript进阶知识点-JS面向对象/">JavaScript进阶知识点--JS面向对象</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="面向对象"><a href="#面向对象" class="headerlink" title="面向对象"></a>面向对象</h1><p>对代码的一种抽象，对外同一提供调用接口的编程思想</p>
<h2 id="基于原型的面向对象"><a href="#基于原型的面向对象" class="headerlink" title="基于原型的面向对象"></a>基于原型的面向对象</h2><p>基于原型的面向对象方式中，对象（object）则是依靠构造器（constructor）利用原型（prototype）构造出来的</p>
<h2 id="JS面向对象的名词解释"><a href="#JS面向对象的名词解释" class="headerlink" title="JS面向对象的名词解释"></a>JS面向对象的名词解释</h2><ul>
<li><p>属性：事物的特效</p>
</li>
<li><p>方法：事物的功能</p>
</li>
<li><p>对象：事物的一个实例</p>
</li>
<li><p>原型：JS函数中由 prototype 属性引用了一个对象，即原型对象（原型）</p>
</li>
</ul>
<h2 id="JS中的闭包"><a href="#JS中的闭包" class="headerlink" title="JS中的闭包"></a>JS中的闭包</h2><p>闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数）</p>
<h3 id="用途"><a href="#用途" class="headerlink" title="用途"></a>用途</h3><ol>
<li><p>读取函数内部变量</p>
</li>
<li><p>让在函数内部声明的变量的值保留在内存中</p>
</li>
</ol>
<h3 id="闭包的优缺点"><a href="#闭包的优缺点" class="headerlink" title="闭包的优缺点"></a>闭包的优缺点</h3><h4 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h4><ol>
<li><p>有利于封装</p>
</li>
<li><p>可以访问局部变量</p>
</li>
</ol>
<h4 id="缺点"><a href="#缺点" class="headerlink" title="缺点"></a>缺点</h4><ol>
<li><p>内存占用浪费严重</p>
</li>
<li><p>内存泄漏</p>
</li>
</ol>
<h3 id="分析闭包"><a href="#分析闭包" class="headerlink" title="分析闭包"></a>分析闭包</h3><ol>
<li><p>函数嵌套函数，这是闭包的一个结构。</p>
</li>
<li><p>函数里的子函数被函数外部一直使用，使子函数无法释放，保持其所在作用域，形成一个封闭的作用域，称之为闭包。</p>
</li>
</ol>
<h2 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h2><h3 id="创建对象"><a href="#创建对象" class="headerlink" title="创建对象"></a>创建对象</h3><ol>
<li><p>字面量（P83）</p>
</li>
<li><p>new 操作符后跟 Object 构造函数（P83）</p>
</li>
<li><p>JS中构造函数方法声明对象</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">function test([参数列表])&#123;</span><br><span class="line">    this.属性 = 属性值;</span><br><span class="line">    this.方法 = function () &#123;</span><br><span class="line">        方法中代码</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var obj = new test(参数列表);</span><br></pre></td></tr></table></figure>

</li>
</ol>
<h1 id="JS-设计模式"><a href="#JS-设计模式" class="headerlink" title="JS 设计模式"></a>JS 设计模式</h1><p>任何模式下，同种模式中的创造出来的对象都是独立存在的</p>
<h2 id="工厂模式"><a href="#工厂模式" class="headerlink" title="工厂模式"></a>工厂模式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">function createObject(name, age) &#123;</span><br><span class="line">    var obj = new Object();</span><br><span class="line">    obj.name = name;</span><br><span class="line">    obj.age = age;</span><br><span class="line">    obj.run = function() &#123;</span><br><span class="line">        return this.name + this.age + &apos;运行中...&apos;;</span><br><span class="line">    &#125;;</span><br><span class="line">    return obj;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var box1 = createObject(&apos;zhangsan&apos;, 100);</span><br><span class="line">var box2 = createObject(&apos;lisi&apos;, 200);</span><br></pre></td></tr></table></figure>

<h2 id="构造方式"><a href="#构造方式" class="headerlink" title="构造方式"></a>构造方式</h2><ol>
<li><p>构造方式不会显示创建对象，将属性赋值给 this ，不需要 return 对象</p>
</li>
<li><p>工厂模式在方法内部创建 object 对象，返回 object 对象，属性和方法都是赋给 object 对象</p>
</li>
</ol>
<h2 id="原型模式"><a href="#原型模式" class="headerlink" title="原型模式"></a>原型模式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">function test() &#123;</span><br><span class="line">&#125;</span><br><span class="line">test.prototype.属性 = 属性值;</span><br><span class="line">test.prototype.属性 = 属性值;</span><br><span class="line">test.prototype.方法名称 = function() &#123;</span><br><span class="line">    执行代码;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var obj = new test();</span><br></pre></td></tr></table></figure>

<h3 id="原型模式的写法原理"><a href="#原型模式的写法原理" class="headerlink" title="原型模式的写法原理"></a>原型模式的写法原理</h3><p>函数本身声明为空内容，利用 prototype 定义一些属性及方法</p>
<h3 id="好处"><a href="#好处" class="headerlink" title="好处"></a>好处</h3><p>让所有实例化的对象都拥有它包含的属性及方法</p>
<h2 id="混合模式"><a href="#混合模式" class="headerlink" title="混合模式"></a>混合模式</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">function test(v1, v2, v3) &#123;</span><br><span class="line">    this.v1 = v1;</span><br><span class="line">    this.v2 = v2;</span><br><span class="line">    tihs.v3 = v3;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">test.prototype.方法名称 = function() &#123;</span><br><span class="line">    执行代码</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">var obj = new test(v1, v2, v3);</span><br></pre></td></tr></table></figure>

<h1 id="遍历"><a href="#遍历" class="headerlink" title="遍历"></a>遍历</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">var ren = &#123;&#125;;</span><br><span class="line">ren.name = &quot;zhangsan&quot;;</span><br><span class="line">ren.age = 18;</span><br><span class="line">ren.demo = function() &#123;</span><br><span class="line">    document.write(&quot;aaaa&quot;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">for(var i in ren)&#123;</span><br><span class="line">    // alert(i);    //弹出属性和方法名称</span><br><span class="line">    alert(ren[i]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">// i是所有的属性或方法名称</span><br></pre></td></tr></table></figure>

<h1 id="封装"><a href="#封装" class="headerlink" title="封装"></a>封装</h1><p>封装（Encapsulation）：把对象内部数据和操作细节进行隐藏</p>
<p>大多数面向对象的语言都支持封装的特性，提供了 private 关键字来隐藏某些属性或方法，用来限制被封装的数据或者内容的访问，只对外提供了一个对象的专门访问的接口</p>
<p>接口一般为调用方法</p>
<p>JavaScript中可以通过闭包实现封装</p>
<h1 id="原型和原型链"><a href="#原型和原型链" class="headerlink" title="原型和原型链"></a>原型和原型链</h1><h2 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h2><p>是利用 prototype 添加属性和方法</p>
<h2 id="原型链"><a href="#原型链" class="headerlink" title="原型链"></a>原型链</h2><p>JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做_proto_的内置属性，用于指向创建它的函数对象的原型对象 prototype</p>
<h1 id="对象冒充"><a href="#对象冒充" class="headerlink" title="对象冒充"></a>对象冒充</h1><p>将父类的属性和方法一起传给子类作为特权属性和特权方法</p>
<p>原型属性和原型方法不属于特权属性和特权方法</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/15/JavaScript进阶知识点-JS面向对象/" data-id="ck4r400r70072l0w0h4zzy2b1" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript进阶知识点-JS函数深入" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/14/JavaScript进阶知识点-JS函数深入/" class="article-date">
  <time datetime="2019-09-14T02:38:33.000Z" itemprop="datePublished">2019-09-14</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/14/JavaScript进阶知识点-JS函数深入/">JavaScript进阶知识点--JS函数深入</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h1><h2 id="创建对象（P145）"><a href="#创建对象（P145）" class="headerlink" title="创建对象（P145）"></a>创建对象（P145）</h2><ol>
<li><p>字面量方法</p>
</li>
<li><p>构造函数</p>
</li>
<li><p><code>Object.create()</code></p>
</li>
</ol>
<h2 id="删除对象属性"><a href="#删除对象属性" class="headerlink" title="删除对象属性"></a>删除对象属性</h2><blockquote>
<p>delete obj.attributeName</p>
</blockquote>
<h2 id="检测属性是否在对象中"><a href="#检测属性是否在对象中" class="headerlink" title="检测属性是否在对象中"></a>检测属性是否在对象中</h2><blockquote>
<p>attributeName in obj</p>
</blockquote>
<p>例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">var person = &#123;</span><br><span class="line">    name: &quot;Tom&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">console.log(name in person);// true</span><br></pre></td></tr></table></figure>

<h2 id="对象枚举"><a href="#对象枚举" class="headerlink" title="对象枚举"></a>对象枚举</h2><h3 id="for-in-循环（P57）"><a href="#for-in-循环（P57）" class="headerlink" title="for in 循环（P57）"></a>for in 循环（P57）</h3><h1 id="函数"><a href="#函数" class="headerlink" title="函数"></a>函数</h1><h2 id="字面量"><a href="#字面量" class="headerlink" title="字面量"></a>字面量</h2><ul>
<li><p>function 声明</p>
</li>
<li><p>var 赋值表达式</p>
</li>
</ul>
<h3 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h3><p>var 赋值表达式不能写在调用之后</p>
<p>var 赋值表达式要先定义，后调用</p>
<h2 id="构造函数（不建议）"><a href="#构造函数（不建议）" class="headerlink" title="构造函数（不建议）"></a>构造函数（不建议）</h2><p>例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var fun = new Function(&quot;num1&quot;, &quot;num2&quot;, &quot;return num1 + num2&quot;)</span><br></pre></td></tr></table></figure>

<h2 id="直接函数调用"><a href="#直接函数调用" class="headerlink" title="直接函数调用"></a>直接函数调用</h2><ul>
<li><p>普通函数调用</p>
</li>
<li><p>匿名函数调用（不能让function打头）（也叫自执行函数）</p>
</li>
</ul>
<h2 id="间接函数调用"><a href="#间接函数调用" class="headerlink" title="间接函数调用"></a>间接函数调用</h2><ul>
<li><p>fun.call()</p>
</li>
<li><p>fun.apply();</p>
</li>
</ul>
<h3 id="参数"><a href="#参数" class="headerlink" title="参数"></a>参数</h3><ol>
<li><p>第一个参数：改变this的指向</p>
</li>
<li><p>第二个参数：改变参数的值</p>
<ul>
<li><p>call：传进的参数以逗号分隔</p>
</li>
<li><p>apply：传进的参数以数组形式体现</p>
</li>
</ul>
</li>
</ol>
<p>例：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// call 方法调用</span><br><span class="line">fun.call(window, 1, 2);</span><br><span class="line"></span><br><span class="line">// apply 方法调用</span><br><span class="line">fun,apply(window, [1, 2]);</span><br></pre></td></tr></table></figure>

<h1 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h1><ul>
<li><p>如果用 alert 或 document.write 输出不是字符串的值，则该值则调用 <code>toString()</code> 方法</p>
</li>
<li><p>document.write 期望接收和输出字符串，当接收的参数不为字符串时，会调用参数的<code>toString</code>方法，将其转化成字符串输出</p>
</li>
<li><p>数组调用<code>toString()</code>后，会将其中的元素用逗号拼接起来变成字符串</p>
</li>
<li><p>一般的对象调用toString()后返回<code>[object Object]</code></p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/14/JavaScript进阶知识点-JS函数深入/" data-id="ck4r400r2006pl0w0ei7gk1jm" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript进阶知识点-JS变量与作用域" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/13/JavaScript进阶知识点-JS变量与作用域/" class="article-date">
  <time datetime="2019-09-13T01:49:54.000Z" itemprop="datePublished">2019-09-13</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/13/JavaScript进阶知识点-JS变量与作用域/">JavaScript进阶知识点--JS变量与作用域</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="检测引用类型"><a href="#检测引用类型" class="headerlink" title="检测引用类型"></a>检测引用类型</h1><h2 id="instanceof-方法（P88）"><a href="#instanceof-方法（P88）" class="headerlink" title="instanceof 方法（P88）"></a>instanceof 方法（P88）</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">if(value instanceof Array)&#123;</span><br><span class="line">    // 对数组执行某些操作</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h1><table>
<thead>
<tr>
<th>基本类型</th>
<th>引用类型</th>
</tr>
</thead>
<tbody><tr>
<td>不可修改</td>
<td>可以修改</td>
</tr>
<tr>
<td>保存在栈内存中</td>
<td>保存在堆内存中</td>
</tr>
<tr>
<td>按值访问</td>
<td>按引用访问</td>
</tr>
<tr>
<td>比较时，值相等即相等</td>
<td>比较时，同一引用才相等</td>
</tr>
<tr>
<td>复制时，创建一个副本</td>
<td>复制的其实是指针</td>
</tr>
<tr>
<td>按值传递参数</td>
<td>按值传递参数</td>
</tr>
<tr>
<td>用 typeof 检测类型</td>
<td>用 instanceof 检测类型</td>
</tr>
</tbody></table>
<h1 id="延长作用域链（不推荐使用）（P75）"><a href="#延长作用域链（不推荐使用）（P75）" class="headerlink" title="延长作用域链（不推荐使用）（P75）"></a>延长作用域链（不推荐使用）（P75）</h1><h2 id="with-方法"><a href="#with-方法" class="headerlink" title="with 方法"></a>with 方法</h2><h2 id="try-catch-语句的-catch-块"><a href="#try-catch-语句的-catch-块" class="headerlink" title="try-catch 语句的 catch 块"></a>try-catch 语句的 catch 块</h2><h1 id="垃圾收集（P79）"><a href="#垃圾收集（P79）" class="headerlink" title="垃圾收集（P79）"></a>垃圾收集（P79）</h1><ul>
<li><p>标识清除</p>
</li>
<li><p>引用计数（基本废除）</p>
</li>
</ul>
<p>引用计数会在循环引用过程中出现错误</p>
<h2 id="手动清除内存"><a href="#手动清除内存" class="headerlink" title="手动清除内存"></a>手动清除内存</h2><p>将变量设置为 null</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/13/JavaScript进阶知识点-JS变量与作用域/" data-id="ck4r400r5006xl0w09msch9ua" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点--event对象常用属性和方法" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/09/01/JavaScript基础知识点--event对象常用属性和方法/" class="article-date">
  <time datetime="2019-09-01T07:11:45.000Z" itemprop="datePublished">2019-09-01</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/09/01/JavaScript基础知识点--event对象常用属性和方法/">JavaScript基础知识点--event对象常用属性和方法</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="event常用属性和方法"><a href="#event常用属性和方法" class="headerlink" title="event常用属性和方法"></a>event常用属性和方法</h1><h2 id="常用属性和方法表"><a href="#常用属性和方法表" class="headerlink" title="常用属性和方法表"></a>常用属性和方法表</h2><table>
<thead>
<tr>
<th>属性或方法</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>type</td>
<td>事件的类型</td>
</tr>
<tr>
<td>srcElement/target</td>
<td>事件源，就是发生事件的元素</td>
</tr>
<tr>
<td>cancelBubble</td>
<td>布尔属性。设为 true 的时候，将停止事件进一步起泡到包容层次的元素（Ele.cancelBubble = true;相当于Ele.stopPropagation();）</td>
</tr>
<tr>
<td>returnValue</td>
<td>布尔属性。设置为 false 的时候可以阻止浏览器执行默认的事件动作（Ele.returnValue = false;相当于Ele.preventDefault();）</td>
</tr>
<tr>
<td>clientX/clientY</td>
<td>事件发生的时候，鼠标相对于浏览器窗口可视文档区域的左上角的位置</td>
</tr>
<tr>
<td>offsetX/offsetY</td>
<td>事件发生的时候，鼠标相对于事件源元素左上角的位置</td>
</tr>
<tr>
<td>initEvent()</td>
<td>初始化新创建的Event对象的属性</td>
</tr>
</tbody></table>
<p>说明：event 对象的所有属性列表可以在浏览器控制台中输出查看</p>
<h2 id="event-type"><a href="#event-type" class="headerlink" title="event.type"></a>event.type</h2><p>返回当前触发事件的类型</p>
<h2 id="event-target"><a href="#event-target" class="headerlink" title="event.target"></a>event.target</h2><p>事件源。返回触发事件的元素</p>
<h2 id="event-currentTarget"><a href="#event-currentTarget" class="headerlink" title="event.currentTarget"></a>event.currentTarget</h2><p>返回事件绑定的元素</p>
<h2 id="event-preventDefault"><a href="#event-preventDefault" class="headerlink" title="event.preventDefault()"></a>event.preventDefault()</h2><p>阻止浏览器执行默认行为</p>
<h2 id="event-stopPropagation"><a href="#event-stopPropagation" class="headerlink" title="event.stopPropagation()"></a>event.stopPropagation()</h2><p>阻止事件的捕获或冒泡</p>
<h2 id="event-clientY"><a href="#event-clientY" class="headerlink" title="event.clientY"></a>event.clientY</h2><p>clientY 事件属性返回当事件被触发时鼠标指针距浏览器顶部底边的距离，不包括滚动条滚动的部分</p>
<h2 id="event-pageY"><a href="#event-pageY" class="headerlink" title="event.pageY"></a>event.pageY</h2><p>pageY 事件属性返回当事件被触发时鼠标指针距浏览器顶部底边的距离，包括滚动条滚动的部分</p>
<h2 id="event-screenY"><a href="#event-screenY" class="headerlink" title="event.screenY"></a>event.screenY</h2><p>屏幕顶端到鼠标位置</p>
<h2 id="event-button"><a href="#event-button" class="headerlink" title="event.button"></a>event.button</h2><table>
<thead>
<tr>
<th>值</th>
<th>代表</th>
</tr>
</thead>
<tbody><tr>
<td>0</td>
<td>鼠标左键</td>
</tr>
<tr>
<td>1</td>
<td>鼠标中键</td>
</tr>
<tr>
<td>2</td>
<td>鼠标右键</td>
</tr>
</tbody></table>
<h2 id="touchcancel"><a href="#touchcancel" class="headerlink" title="touchcancel"></a>touchcancel</h2><p>当系统停止跟踪触摸时触发</p>
<h2 id="event-touches"><a href="#event-touches" class="headerlink" title="event.touches"></a>event.touches</h2><p>当前触摸屏幕的触摸点数组</p>
<h2 id="event-changedTouches"><a href="#event-changedTouches" class="headerlink" title="event.changedTouches"></a>event.changedTouches</h2><p>数组中只包含引起事件的触摸点信息</p>
<h2 id="event-targetTouches"><a href="#event-targetTouches" class="headerlink" title="event.targetTouches"></a>event.targetTouches</h2><p>只包含放在元素上的触摸信息</p>
<h2 id="IE事件独有"><a href="#IE事件独有" class="headerlink" title="IE事件独有"></a>IE事件独有</h2><h3 id="event-returnValue-false"><a href="#event-returnValue-false" class="headerlink" title="event.returnValue = false"></a>event.returnValue = false</h3><p>阻止默认行为。同 preventDefault</p>
<h3 id="event-cancleBubble-true"><a href="#event-cancleBubble-true" class="headerlink" title="event.cancleBubble = true"></a>event.cancleBubble = true</h3><p>取消事件冒泡。同 stopPropagation</p>
<h3 id="srcElement"><a href="#srcElement" class="headerlink" title="srcElement"></a>srcElement</h3><p>同 target</p>
<h3 id="event-button-1"><a href="#event-button-1" class="headerlink" title="event.button"></a>event.button</h3><table>
<thead>
<tr>
<th>值</th>
<th>代表</th>
</tr>
</thead>
<tbody><tr>
<td>0</td>
<td>没有按下按钮</td>
</tr>
<tr>
<td>1</td>
<td>按下主鼠标按钮</td>
</tr>
<tr>
<td>2</td>
<td>按下次鼠标按钮</td>
</tr>
<tr>
<td>3</td>
<td>同时按下主、次鼠标按钮</td>
</tr>
<tr>
<td>4</td>
<td>按钮中间鼠标按钮</td>
</tr>
</tbody></table>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/09/01/JavaScript基础知识点--event对象常用属性和方法/" data-id="ck4r400q1004ml0w0p6stamiy" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/3/">&laquo; Prev</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><span class="page-number current">4</span><a class="page-number" href="/page/5/">5</a><a class="page-number" href="/page/6/">6</a><span class="space">&hellip;</span><a class="page-number" href="/page/12/">12</a><a class="extend next" rel="next" href="/page/5/">Next &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Ajax/">Ajax</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS3/">CSS3</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Dart/">Dart</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Flutter/">Flutter</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML5/">HTML5</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JSON/">JSON</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/QT/">QT</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Sass/">Sass</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/bootstrap/">bootstrap</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ajax/">Ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Dart/">Dart</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Flutter/">Flutter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSON/">JSON</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/QT/">QT</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Sass/">Sass</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/">TypeScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bootstrap/">bootstrap</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Ajax/" style="font-size: 12.22px;">Ajax</a> <a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 17.78px;">CSS3</a> <a href="/tags/Dart/" style="font-size: 14.44px;">Dart</a> <a href="/tags/Flutter/" style="font-size: 16.67px;">Flutter</a> <a href="/tags/Git/" style="font-size: 12.22px;">Git</a> <a href="/tags/HTML/" style="font-size: 14.44px;">HTML</a> <a href="/tags/HTML5/" style="font-size: 12.22px;">HTML5</a> <a href="/tags/JSON/" style="font-size: 10px;">JSON</a> <a href="/tags/Java/" style="font-size: 11.11px;">Java</a> <a href="/tags/JavaScript/" style="font-size: 20px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/QT/" style="font-size: 12.22px;">QT</a> <a href="/tags/React/" style="font-size: 15.56px;">React</a> <a href="/tags/Sass/" style="font-size: 11.11px;">Sass</a> <a href="/tags/TheKnowledgeOf/" style="font-size: 11.11px;">TheKnowledgeOf</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/bootstrap/" style="font-size: 11.11px;">bootstrap</a> <a href="/tags/jQuery/" style="font-size: 13.33px;">jQuery</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>